<title>高德地图</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> 
<!--  
    官网地址：http://lbsyun.baidu.com/index.php?title=jspopular
    当前版本：v2.0  v3.0  lite(v1.0)
    作用概述：百度地图JavaScript API
    插件兼容：IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
    集成时间：2018年5月2日

使用步骤：
    1、（可选，但是推荐这么做）在config.js中加入以bMap为key的配置（只有ak为必须配置）：
        ,bMap:{
            ak:'这个是key'//必须参数，其余参数可不配置
            ,v:'3.0'//默认版本3.0（可选1.0  2.0   3.0  其中1.0为lite）。具体请查看官方api
            ,autolite:false//是否根据当前系统版本自动开启lite版本，默认false。若使用了lite中没有的功能，请将该参数设置为false
            ,https:false//是否开启https请求， 默认false
            ,timeout:10//等待bMap的加载时间。默认10s。若在10s内未能加载bMap则控制台会报错：bMap加载超时
        }
    2、还是config.js，在extend配置中加入bMap：
        ,'bMap'
    3、浏览器访问本页面即可看到样例。 例如：http://localhost/start/index.html#/test/bMap

注意：
    1、因为单页，所以只会在第一次初始化（若设置步骤1的config，则在layui.use之后就会自动初始化）的时候发起一次初始化加载js的请求。
    2、本插件只是实现了加载百度地图api的功能，剩余的代码都需要在bMap.render中自行编写。
    3、友情提示：百度地图商业用途是收费的。

-->

<div id="LAY_test_bMap_div1" style="width: 50%;height: 50%;"></div>
<div id="LAY_test_bMap_div2" style="width: 50%;height: 50%;">
    <div class="info" style="position: inherit;">
        <h4 id='status'></h4><hr>
        <p id='result'></p><hr>
        <p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>
    </div>
</div>
<script type="text/javascript">
    layui.use('aMap', function(){
        var aMap = layui.aMap;

        //建议这么用，简单明了
        // aMap.render(function(){//这里直接写回调函数即可
        //     key:'8a24284335833cb6edbf7ec7f1a93e92'
        //     ,https:true
        //     // var map = new AMap.Map("LAY_test_bMap_div1"); //js严格区分大小写，因此BMap和bMap是两个不同变量。
        //     // var point = new AMap.Point(116.404, 39.915);  // 创建点坐标  
        //     // map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
        // });

        //如果没有设置第一步骤，其实也可以使用下述的方法来加载百度地图
        //但是初始化请求只有一次、却在每次代码都单独配置就很多余了
        //下述例子只是展示内置功能，在实际使用中推荐使用第一个步骤那样配置：
        aMap.render({
            key:'8a24284335833cb6edbf7ec7f1a93e92'//一旦设置了全局，此（发起请求的相关）参数就会失效。
            ,https:true
            ,done:function(){//这种方式回调函数叫做done


 var map = new AMap.Map('LAY_test_bMap_div1', {
        resizeEnable: true
    });
    AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            buttonPosition:'RB',    //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
                onComplete(result)
            }else{
                onError(result)
            }
        });
    });
    //解析定位结果
    function onComplete(data) {
        document.getElementById('status').innerHTML='定位成功'
        var str = [];
        str.push('定位结果：' + data.position);
        str.push('定位类别：' + data.location_type);
        if(data.accuracy){
             str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        document.getElementById('result').innerHTML = str.join('<br>');
    }
    //解析定位错误信息
    function onError(data) {
        document.getElementById('status').innerHTML='定位失败'
        document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
    }














                // var map = new BMap.Map("LAY_test_bMap_div2"); 
                // var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
                // map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
            }
        });

    });
</script>